<template>
	<view class="page">
		<view class="card dis aic">
			<view class="lable">
				收货人
			</view>
			<u--input placeholder="请输入收货人名称" border="none" v-model="name" class="input"
				placeholderClass='placeholderClass'></u--input>
		</view>
		<view class="card dis aic">
			<view class="lable">
				地址
			</view>
			<view @click="showSelect" :class="[province && city && area  ? 'input' : 'placeholderClass']">
				{{province && city && area ? province +'-' + city + '-' + area : '请选择地址'}}
			</view>
			<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"
				@cancel="close"></u-picker>
		</view>
		<view class="card dis aic">
			<view class="lable">
				详细地址
			</view>

			<u--input placeholder="请填写所在详细地址" :loading="loading" border="none" v-model="address" class="input"
				placeholderClass='placeholderClass'></u--input>
		</view>
		<view class="card dis aic">
			<view class="lable">
				联系电话
			</view>
			<u--input placeholder="请输入联系人电话" border="none" type='number' maxlength='11' v-model="phone" class="input"
				placeholderClass='placeholderClass'></u--input>
		</view>

		<view class="card dis aic">
			<view class="lable">
				默认地址
			</view>
			<u-switch v-model="isDefault" activeColor="#3DA591"></u-switch>
		</view>

		<view class="save" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	import {
		getArea,
		receiptInformationAdd,
		receiptInformationEdit
	} from '@/api.js'
	export default {
		data() {
			return {
				loading: false,
				value: '',
				name: '',
				province: '',
				city: '',
				area: '',
				address: '',
				phone: '',
				isDefault: 0,
				show: false,
				columns: [
					[],
					[],
					[]
				],
				id: ''
			}
		},
		onShow() {
			this.init()
			this.getAreaList('', 0)
		},
		onLoad(opt) {
			if (opt.item) {
				console.log(JSON.parse(opt.item))
				let temp = JSON.parse(opt.item)
				this.name = temp.name
				this.province = temp.province
				this.city = temp.city
				this.area = temp.area
				this.address = temp.address
				this.phone = temp.phone
				this.isDefault = temp.isDefault == 1 ? true : false
				this.id = temp.id
			}
		},
		methods: {
			init() {
				this.getAreaList('', 0)
			},
			async save() {

				if (!this.checked()) {
					return
				}
				uni.showLoading({
					title: '新增中',
					mask: true
				});
				if (this.id && this.id != '') {
					let res = await receiptInformationEdit({
						id: this.id,
						name: this.name,
						province: this.province,
						city: this.city,
						area: this.area,
						address: this.address,
						phone: this.phone,
						isDefault: this.isDefault ? 1 : 0
					})
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "修改成功"
						})

						setTimeout(() => {
							uni.$emit('refreshData', {});
							uni.navigateBack()
						}, 2000)
					}
				} else {
					let res = await receiptInformationAdd({
						name: this.name,
						province: this.province,
						city: this.city,
						area: this.area,
						address: this.address,
						phone: this.phone,
						isDefault: this.isDefault ? 1 : 0

					})
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "新增成功"
						})
						setTimeout(() => {
							uni.$emit('refreshData', {});
							uni.navigateBack()
						}, 2000)
					}
				}

			},
			checked() {

				if (!this.name || this.name == '') {
					uni.showToast({
						icon: "none",
						title: "请填写收货人"
					})
					return false
				}
				if (!this.province || this.province == '') {
					uni.showToast({
						icon: "none",
						title: "请选择地址"
					})
					return false
				}
				if (!this.city || this.city == '') {
					uni.showToast({
						icon: "none",
						title: "请选择地址"
					})
					return false
				}
				if (!this.area || this.area == '') {
					uni.showToast({
						icon: "none",
						title: "请选择地址"
					})
					return false
				}
				if (!this.address || this.address == '') {
					uni.showToast({
						icon: "none",
						title: "请填写详细地址"
					})
					return false
				}
				if (!this.phone || this.phone == '') {
					uni.showToast({
						icon: "none",
						title: "请填写手机号"
					})
					return false
				}
				return true

			},

			getAreaList(name, index) {
				let that = this
				this.loading = true
				if (index == 0) {
					// 初始化
					getArea(
						name
					).then((res) => {
						that.$refs.uPicker.setColumnValues(0, Object.values(res));
						getArea(
							Object.values(res)[0]
						).then((ress) => {
							that.$refs.uPicker.setColumnValues(1, Object.values(ress));
							getArea(
								Object.values(ress)[0]
							).then((resss) => {
								that.$refs.uPicker.setColumnValues(2, Object.values(resss));
								this.loading = false
							})
						})
					})
				} else if (index == 1) {
					// 选择省
					getArea(
						name
					).then((res) => {
						that.$refs.uPicker.setColumnValues(1, Object.values(res));
						getArea(
							Object.values(res)[0]
						).then((ress) => {
							that.$refs.uPicker.setColumnValues(2, Object.values(ress));
							this.loading = false
						})
					})
				} else if (index == 2) {
					// 选择省
					getArea(
						name
					).then((res) => {
						that.$refs.uPicker.setColumnValues(2, Object.values(res));
						this.loading = false

					})
				}


			},
			changeHandler(e) {
				let that = this
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e
				console.log('columnIndex', columnIndex);
				console.log('index', index);
				console.log('value', value);
				if (columnIndex === 0) {
					that.getAreaList(value[0], columnIndex + 1)
				}
				if (columnIndex === 1) {
					that.getAreaList(value[1], columnIndex + 1)
				}
			},
			showSelect() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm(e) {
				console.log('confirm', e)
				this.province = e.value[0]
				this.city = e.value[1]
				this.area = e.value[2]
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F6F6F6;
		min-height: 100vh;
		width: 750rpx;
	}

	.card {
		width: 750rpx;
		height: 120rpx;
		background: #fff;
		margin-bottom: 4rpx;

		.lable {
			padding-left: 30rpx;
			box-sizing: border-box;
			width: 210rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
			line-height: 32rpx;
		}

		.input {
			width: 540rpx;
		}

		.placeholderClass {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #BBBBBB;
		}
	}

	.save {
		width: 690rpx;
		margin: 40rpx 30rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: #3DA591;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>